<script setup lang="ts">
defineProps<{
  title?: string
  description?: string
  bodyClass?: string
}>()
</script>

<template>
  <div class="flex flex-col border border-primary border-solid bg-primary">
    <!--  head -->
    <div
      v-if="$slots.title || title"
      class="flex flex-justify-between flex-items-center border-b border-b-primary border-b-solid p-3"
    >
      <div
        v-if="$slots.title || title"
        class="text-xl"
      >
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div class="flex grow flex-justify-end">
        <slot name="buttons" />
      </div>
    </div>
    <!--  body -->
    <div :class="`flex-1 overflow-auto ${bodyClass ?? 'p-3'}`">
      <slot />
    </div>
  </div>
</template>
